hello,JS:06-3 [Array]

一、数组基本使用

1、如何去声明一个数组

1
var arr = [ 值 ]

值里面可以是数据类型中的任何一个,如数字、字符串、对象、函数、数组等任何
如:

1
var arr =  [3,4,5]

题外话: 数组正(fu)规(za)的写法

1
2
Array(3,4,5)  
//(3) [3, 4, 5]

图:
image

2、length(表示数组的个数)

语法:

1
arr.length

(1)如何获取数组的最后一位具体数值?

1
arr[arr.length-1]

如:

1
2
3
4
5
arr =  [4,5,6]  
//(3)[4,5,6]

arr[arr.length-1]
//6

(2)用arr.length=0来清空数组,变成空数组

1
arr.length=0  -->0 arr -->[]

(3)length如何进行截断(截断一词,是我自己想的,很形象了😂)
假设:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var arr =  [4,5,6] 
//undefined
arr
// (3) [4, 5, 6]
arr[100]=100
//100
arr.length
//101
arr[3]
// undefined
arr[99]
//undefined
arr[100]
//100
`

然后,我们通过设置length进行数组截断

1
2
3
4
arr.length =  2  
//2
arr
//(2) [4, 5]

3、下标使用

语法:

1
arr[下标位数]

(1)用下标访问数组的每一个元素:

1
2
3
4
5
6
7
8
9
10
arr =  [4,5,6]  
//(3)[4,5,6]
arr[0]
// 4
/* 或 */
arr[1]
// 5
/* 或 */
arr[2]
// 6

(2)用下标去赋值,假设

1
2
3
arr[2]  =100
arr
// (3) [3, 4, 100]


1
2
3
4
5
//为不存在位数赋值
arr[3]=101
//101
arr
//(4) [3, 4, 100, 101]

或者

1
2
3
4
arr[100]=10  
//10
arr
// (101) [3, 4, 100, 101, empty × 96, 10]

图:
image

4、使用for循环遍历length,得出数组里具体的值

1
2
3
4
5
6
7
arr =[4,5,6] 
//(3) [4, 5, 6]

for(var i=0;i<arr.length;i++){
console.log(arr[i])
}
//4 5 6

二、数组的一些操作

1、栈方法:在数组里最后一位进行新增、删除操作

这是数组中的一种栈方法,能够让我们使用堆栈那样先入后出使用数组
(1)新增(于最后一位):push
语法:

1
arr.push()

如:

1
2
3
4
arr.push('wangxiaoqin')  
// 4 //返回值输出位数
arr
//(4) [4, 5, 6, "wangxiaoqin"]

(2)去除(掉最后一位):pop
语法:

1
arr.pop()

如:

1
2
3
4
5
6
7
8
arr.push('wangxiaoqin') 
// 4 //返回值输出位数
arr
//(4) [4, 5, 6, "wangxiaoqin"]
arr.pop() //或console.log(arr.pop()),对应变量是一个结果(或方法)
//"wangxiaoqin"
arr
//(3) [4, 5, 6]

2、队列方法:数组里第一位新增、删除

这是数组中的一种队列方法,先入先出的队列法使用数组

(1)新增(于第一位):unshift
语法:

1
arr.unshift()

如:

1
2
3
4
arr.unshift('wangxiaoqin') 
//4
arr
//(4) ["wangxiaoqin", 4, 5, 6]

(2)删除(掉第一位):shift
语法:

1
arr.shift()

如:

1
2
3
4
5
6
7
8
arr.unshift('wangxiaoqin') 
//4
arr
//(4) ["wangxiaoqin", 4, 5, 6]
arr.shift()
//"wangxiaoqin"
arr
//(3) [4, 5, 6]

3、在数组的任意位置新增、删除

(1)splice:删除、新增、替换、修改

A、语法:
arr.splice (star位数,length/替换值,具体值)

B、用处:

用于一次性解决数组添加、删除(二者结合可达到替换效果)

C、三个参数:

  • 开始索引
  • 删除元素的位移
    如:指定前两个参数,可以使用splice删除数组元素,同样会带来索引调整及length调整

    1
    2
    3
    4
    5
    6
    7
    8
    var arr =  [1,2,3,4,5]  
    // undefined
    arr.splice(1,3)//从下标1开始(包括下标1的值2),删除3个,所以数组元素为2,3,4 均被删除
    //(3) [2, 3, 4] //所输出的a.splice所执行的结果,是一个新数组为[2, 3, 4]
    arr.length
    //2
    arr
    //(2) [1, 5] //同时arr本身剩下[1,5]
  • 插入(替换)新元素(可以多写几个)

如:插入和替换,如果从第几个位开始做替换,替换的数组元素个数为0,即把0个元素替换成我需要的数组元素,则是使用splice插入法

1
2
3
4
5
6
7
8
var arr =[1,2,3,4,5] 
--> undefined
arr.splice(1,0,9,99,999) //从下标1开始,即数组元素2前面,替换(其实就是插入)9,99,999三个数组元素
// []
arr.length
// 8
arr
// (8) [1, 9, 99, 999, 2, 3, 4, 5]

注:

这样的插入法,是连续性的,不在同一脚本同一时刻进行不同位数的插入。执行数组插入(替换)是一次完成,数组本身长度发生变化

实例:

如怎么去掉数组里的负数值,先看一个错误示范:

1
2
3
4
5
6
7
8
9
10
var arr =[3,  4,  -3,  -2,  -1,  5]  
--> undefined
for(var i=0;i<arr.length;i++){
if(arr[i]<0){ //数组里的具体值
arr.splice(i,1) //此时执行完下标为2的-3值,得出新数组[3, 4, -2, -1, 5] //继续执行i++,此时i=3,此时数组元素-1下标为3,直接跳过数组元素-2的下标
}
}
// [-1]
arr
// (4) [3, 4, -2, 5]

正确示范:

1
2
3
4
5
6
7
8
9
10
11
    var arr =[3,  4,  -3,  -2,  -1,  5]  
// undefined
for(var i=0;i<arr.length;i++){
if(arr[i]<0){
arr.splice(i,1)
i -- //通过退回下标,可执行忽略的那个位数上的数组元素
}
}
//undefined
arr
//(3) [3, 4, 5]

  • splice方法返回一个由删除元素组成的新数组,没有删除则返回空数组,则原数组发生改变,如:
    1
    2
    3
    4
    5
    6
    7
    8
    var arr =  [3,4,5] 
    // undefined
    arr
    //(3) [3, 4, 5]
    arr.splice(1,2) //从下标为1的元素开始,拿出来2个元素作为一个数组返回,原数组发生改变
    //(2) [4, 5]
    arr
    //[3] //原数组发生改变
1
2
3
4
5
6
7
8
arr.push(8,9,10) 
--> 6
arr
--> (6) [4, 5, 6, 8, 9, 10]
arr.splice(2,0,1,2,3) //从下标为2的位置(元素6)前开始,删除0个,新增两个元素(在6前面新增8,9,10)
--> []
arr
--> (9) [4, 5, 1, 2, 3, 6, 8, 9, 10]

(2)slice
语法:
arr.splice(star,end)

如:

1
2
3
4
5
6
arr 
// (9) [4, 5, 1, 2, 3, 6, 8, 9, 10]
arr.slice(2,3)/*从arr下标为2开始,到下标为3结束(不包括3),做为新数组,原数组不变 */
// [1]
arr
// (9) [4, 5, 1, 2, 3, 6, 8, 9, 10]

4、join(加入一个任意字符串(甚至空字符串))

1
arr.join()  //灵活应对

如:

1
2
3
4
5
6
7
8
9
var arr =  [3,4,5] 
// undefined
arr
// (3) [3, 4, 5]
arr.join('-')
// "3-4-5"
/* 或 */
arr.join('.')
// "3.4.5"

5、reverse(数组里的值进行倒序(本身发生变化))

倒序法,会修改原数组

语法:
arr.reverse()

如:

1
2
3
4
5
6
var arr=[3,4,5,6,7,8]  
// undefined
arr
// (6) [3, 4, 5, 6, 7, 8]
arr.reverse()
// (6) [8, 7, 6, 5, 4, 3]

假如,当数组索引(下标)不是连续或以0 开始,结果需要注意:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var a =  [1,2,3,4,5] 
// undefined
a =[]
// []
a[2]=2
// 2
a[3]=3
// 3
a[7]=4
// 4
a[8]=5
// 5
a.reverse()
// (9) [5, 4, empty × 3, 3, 2, empty × 2]

6、concat(合成两个数组)

如:

1
2
3
4
5
6
7
8
9
10
var a =  [1,  2,  3,  4,  5] 
-->undefined
var b = [6, 7, 8, 9]
-->undefined
a.concat(b)
// (9) [1, 2, 3, 4, 5, 6, 7, 8, 9] //返回一个新数组,由于原数组保持不变,所以需要为这个数组赋值一个新变量
a
// (5) [1, 2, 3, 4, 5] //原数组保持不变
b
// (4) [6, 7, 8, 9] //原数组保持不变

7、sort(对数组进行排序)

排序法,是一种内部的排序。可排序数字、字符串

语法:
a.sort()

如:

  • 对数字

    1
    2
    3
    4
    var a=[5,4,3,2,1] 
    // undefined
    a.sort()
    // (5) [1, 2, 3, 4, 5]
  • 对字符串

    1
    2
    3
    4
    var a=[5,"a",  "c",  "h",  "z"] 
    // undefined
    a.sort()
    // (5) [5, "a", "c", "h", "z"]

但是假如,这样排序,结果则不是按顺序排序

1
2
3
4
var a=[7,8,9,10,11]  
// undefined
a.sort()
// (5)[10, 11, 7, 8, 9]

不加参数用sort排序法直接排序,它会将数组里的元素当成字符串去排序。按照字母表排序,7就比10大,这时候我们可以在sort内部传入自定义排序函数(比较函数):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var a=[7,8,9,10,11] 
-->undefined
a.sort()
// (5) [10, 11, 7, 8, 9]
a.sort(function(v1,v2){
return v1-v2
})
// (5) [7, 8, 9, 10, 11]

/*或者*/

var friends = [{age:3,name:'dog'},{age:2,name:'cat'},{age:4,name:'bird'}]
-->undefined
friends.sort(function(v1,v2){
return v1.age -v2.age
})
// -->(3) [{…}, {…}, {…}]
-->0: {age: 2, name: "cat"}
1: {age: 3, name: "dog"}
2: {age: 4, name: "bird"} length: 3__proto__: Array(0)
friends
//-->(3) [{…}, {…}, {…}]
friends.sort(function(v1,v2){
return v1.name > v2.name
})
//-->(3) [{…}, {…}, {…}]
--> 0: {age: 4, name: "bird"}
1: {age: 2, name: "cat"}
2: {age: 3, name: "dog"}
length: 3__proto__: Array(0)

三、如何创建一个数组

1、通过构造函数

数组,作为一个特殊对象,通过传统的newArray创建数组

2、通过使用字面量

如:

1
2
3
4
var arr=  [5] 
// undefined
a.length
// 1

注:
使用带初始化参数的方式创建数组的时候,最好最后不要带多余的,,在不同的浏览器下对此处理方式不一样,如

1
2
3
4
var a1 =  [1,2,3,]
//该脚本在现代浏览器上运行结果和我们设想一样,长度是3,但是在低版本IE下确实长度为4的数,而最后一条数据是undefined,就会造成误会 。
console.log(a1.length)
console.log(a1)

四、数组的索引、长度

数组也是对象,我们可以使用索引的奥秘在于,数组会把索引值转换为对应字符串(如 1=>“1”)作为对象属性名
如:

1
2
3
4
5
6
7
var arr =[1,2,3,4] arr[0]  
// 1
var i = 1
console.log(arr[i])
// 2
console.log(arr[++i])
// 3

题外话:

不过在做这道题的时候,我发现一旦没有深刻理解操作符和运行机制的话,会导致结果不同,如:
image
由于i++是后置,运行时按照:先拿i的值——再进行++操作;++i则是前置,运行时按照:先++操作再拿i的值。所以,运行机制上

五、数组的两三话

1、数组的底层数据结构

数组 === 特殊的对象(注:对象,由属性和属性值构成)。通过数组和对象的研究可以看出,数组可看成在对象的基础上做了一层的封装,然后自身又增加了一些方法。如:

1
2
3
4
5
6
arr =  [4,5,6] 
//-->(3) [4, 5, 6]
//-->0: 4 //展开之后数组的底层数据结构
1: 5
2: 6
length: 3 __proto__: Array(0)

再如:

1
2
3
4
5
6
obj =  {1:4,2:5,3:6,length:3}  
//{1: 4, 2: 5, 3: 6, length: 3}//数组底层的数据结构构成
obj[1]
// 4
obj.length
// 3

2、数组的一些用法

(1)关于数组里的属性和值的一些奇怪的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
arr [-10]  =  'aaa'  
--> "aaa"
arr [-10]
--> "aaa"
arr
//-->(3) [4, 5, 6, -10: "aaa"]
(3) [4, 5, 6, -10: "aaa"]
--> 0: 4
1: 5
2: 6
-10: "aaa" //这是一个很奇怪的属性和值,
length: 3
__proto__: Array(0)

(2)关于数组中删除的问题

A、首先,删除数组元素,可以直接使用delete,如

1
2
3
4
5
6
7
8
9
10
11
var arr =  [3,4,5]  
//undefined
arr
// (3) [3, 4, 5]
delete arr[2]//通过最后的输出,则能知道数组里的是位数属性
//true
arr
// (3) [3, 4, empty]
console.log(arr[2])
// undefined
undefined

B、以此,我们可以联想到,如果a[2]被赋值为undefined,情况也和delete之后的undefined类似,不会改变数组长度,也不会改变其他数据的indexvalue对应关系。

-------------本文结束感谢您的阅读-------------